<template>
  <chart :options="options" :auto-resize="autoResize" :theme="theme" :watch-shallow="watchShallow"
      :class="className" :style="{height:height,width:width}"></chart>
</template>

<script>
const animationDuration = 2000

export default {
  props: {
    chartData: { type: Object },
    className: { type: String, default: 'chart' },
    theme: { type: String, default: 'macarons' },
    autoResize: { type: Boolean, default: true },
    watchShallow: { type: Boolean, default: true },
    width: { type: String, default: '100%' },
    height: { type: String, default: '250px' }
  },
  data() {
    return {
      options: this.buildOptions(this.charData)
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.options = this.buildOptions(val)
      }
    }
  },
  mounted() {
    if (!this.options && this.chartData) {
      this.options = this.buildOptions(this.chartData)
    }
  },
  methods: {
    buildOptions(chartData) {
      if (chartData === null) {
        chartData = {}
      }
      if (!chartData) {
        return
      }
      var datas = []
      var links = []
      var count = chartData.lookups !== null ? chartData.lookups.length + 1 : 1
      var data = {
        name: chartData.table,
        x: 550,
        y: count === 1 ? 200 : 100,
        label: {
          normal: {
            position: 'inside',
            fontSize: 14
          }
        },
        itemStyle: {
          normal: {
            color: '#409eff'
          }
        }
      }
      datas.push(data)
      if (chartData.lookups !== null) {
        for (var i = 0; i < chartData.lookups.length; i++) {
          var y = 800 - parseInt((500 / chartData.lookups.length) + '')
          if (chartData.lookups[i].joinType === 'INNER') {
            y = 550
          } else if (chartData.lookups[i].joinType === 'RIGHT') {
            y = 300 + parseInt((500 / chartData.lookups.length) + '')
          }
          data = {
            name: chartData.lookups[i].table,
            x: y,
            y: 300,
            label: {
              normal: {
                position: 'inside',
                fontSize: 14
              }
            },
            itemStyle: {
              normal: {
                color: '#8CC749'
              }
            }
          }
          datas.push(data)
          var link = {
            source: chartData.table,
            target: chartData.lookups[i].table
          }
          links.push(link)
        }
      }
      return {
        grid: {
          top: 30,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'none',
            color: ['#409eff', '#8CC749'],
            symbolSize: 50,
            roam: true,
            label: {
              normal: {
                show: true
              }
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              normal: {
                textStyle: {
                  fontSize: 20
                }
              }
            },
            data: datas,
            links: links,
            lineStyle: {
              normal: {
                opacity: 0.9,
                width: 2,
                curveness: 0
              }
            }
          }
        ],
        animationDuration
      }
      /* [{
          name: 'pageA',
          type: 'bar',
          data: [79, 52, 200, 334, 390, 330, 220],
          animationDuration
        }] */
    }
  }
}
</script>
